<template>
<div>
  <div>
    <my-header></my-header>
  </div>
  <div style="margin-top: 100px" >
    <el-card class="box-card" style="width: 450px;margin: 0 auto;">
      <div slot="header" class="clearfix" style="text-align: center; ">
        <span style="line-height: 36px;font-size: 23px">品牌商登录</span>
      </div>
      <div style="text-align: center"   v-loading="loading">
        <el-form  :model="from" label-width="80px" @submit.native.prevent="login" >
          <el-form-item label="用户名">
            <el-input v-model.trim="from.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="from.password"></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-col :span="14">
              <el-input v-model.trim="from.yzm"></el-input>
            </el-col>
            <el-col :span="10">
              <img src="/brand_service/Verify_code.action" id="vcode" @click="changeverifycode" style="float: right;cursor: pointer">
            </el-col>
          </el-form-item>
          <el-form-item style="margin-left: -40px">
            <el-button native-type="submit" type="primary"  style="width: 90%;margin: 0 auto">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>


</div>
</template>
<style>
.el-input__inner {
  font-size: 14px;
}
</style>
<script type="text/ecmascript-6">
import Myheader from "./header.vue";
import API from "../API"
import router from "../router"
import {
        mapMutations,
        mapActions,
        mapState
} from 'vuex';

export default {
  components: {
    "my-header": Myheader
  },
  mounted(){
  },
  data() {
    return {
      from: {
        username: "",
        password: "",
        yzm:""
      },
      loading:false,

    }
  },
  methods: {
    ...mapActions([
      'setuser'
    ]),
    login() {
      if(this.from.username.trim()==""){
        this.$message({
          showClose: true,
          message: '请填写用户名',
          type: 'warning'
        });
        return false
      }
      if(this.from.password==""){
        this.$message({
          showClose: true,
          message: '请填写密码',
          type: 'warning'
        });
        return false
      }
      if(this.from.yzm.trim()==""){
        this.$message({
          showClose: true,
          message: '请填写验证码',
          type: 'warning'
        });
        return false
      }
      this.loading=true;
      API.login({
        username:this.from.username,
        password:this.from.password,
        logintype:"brand",
        Verifycode:this.from.yzm
      }).then((res)=>{
        this.loading=false;
        var json=res.data;
        if (json.message=="success"){
          this.$notify({
            title: '成功',
            message: '登录成功',
            type: 'success'
          });
          this.setuser({user:json.userinfo});
          router.replace({name: '首页'})
        }else if (json.message=="codeerror") {
          this.$notify.error({
            title: '失败',
            message: '验证码输入错误',
          });
          thi.changeverifycode();
          this.from.yzm="";
        }else if(json.message=="nameorpaserro"){
          this.$notify.error({
            title: '失败',
            message: '用户名或密码错误',
          });
        }else {
          this.$notify.error({
            title: '失败',
            message: '查询失败',
          });
        }
      }).catch(()=>{
        this.loading=false;

      })
    },
    changeverifycode(){
      if (document.getElementById("vcode")){
        document.getElementById("vcode").src=document.getElementById("vcode").src+"?v="
      }
      this.from.yzm="";
    }

  }
}
</script>
